// pages/colorpad/colorpad.js
Page({
  isHex: true, //十六进制颜色值开关
  data: {
    color: '#000000',
    bgcolor: '#ffffff',
    red: '0',
    green: '0',
    blue: '0',
    hexLabel: "使用十六进制颜色值"
  },
  /**
   * 十六进制转换：
   * 将0-255的十进制数字转换为两位十六进制数，不足两位高位补0
   */
  toHex: function (num) {
    var str = ""
    if (num < 16) {
      str = "0" + num.toString(16)
    } else {
      str = num.toString(16)
    }
    return str
  },
  /**
   * 设置前景色和背景色
   */
  setColor: function () {
    var rr = this.data.red //获取前景色红色分量
    var gg = this.data.green //获取前景色绿色分量
    var bb = this.data.blue //获取前景色蓝色分量
    var dark = (Number(rr) + Number(gg) + Number(bb)) < 383 //判断前景色亮度
    var str = ""
    if (this.isHex) { //若十六进制开关打开，设置前景色为#rrggbb十六进制格式
      str = "#" + this.toHex(Number(rr)) + this.toHex(Number(gg)) + this.toHex(Number(bb))
      this.setData({
        color: str
      })
    } else { //若十六进制开关关闭，设置前景色为rgb(r,g,b)十进制格式
      str = "rgb(" + rr + "," + gg + "," + bb + ")"
      this.setData({
        color: str
      })
    }
    if (dark) { //根据前景色亮度设置背景色为黑色或者白色
      this.setData({
        bgcolor: "#ffffff"
      })
    } else {
      this.setData({
        bgcolor: "#000000"
      })
    }
  },
  /**
   * silder滑块改变时的操作：
   * 设置相应的颜色分量并调用颜色改变函数
   */
  sliderChange: function (e) {
    var rgb = e.target.dataset.val
    const flg = (rgb === 'r' ? 'red' : (rgb === 'g' ? 'green' : 'blue'))
    this.setData({
      [flg]: e.detail.value
    })
    this.setColor()
  },

  fixVal: function (val) {
    return val < 0 ? 0 : (val > 255 ? 255 : val)
  },

  /**
   * 点击+1、-1按钮时的操作：
   * 设置相应的颜色分量值并调用颜色改变函数
   */
  numBtn: function (e) {
    var step = e.target.dataset.val
    const a = step[0]
    var val = Number(step.slice(1, 3))
    if (a === 'r') {
      val = this.fixVal(Number(this.data.red) + val)
      this.setData({
        red: val
      })
    } else if (a === 'g') {
      val = this.fixVal(Number(this.data.green) + val)
      this.setData({
        green: val
      })
    } else {
      val = this.fixVal(Number(this.data.blue) + val)
      this.setData({
        blue: val
      })
    }
    this.setColor()
  },
  /**
   * 十六进制开关switch改变时的操作：
   * 设置开关全局变量isHex值，并调用颜色改变函数
   */
  switchChange: function (e) {
    if (e.detail.value) {
      this.isHex = true
      //刷新颜色值函数
      this.setColor()
      this.setData({
        hexLabel: "使用十六进制颜色值"
      })
    } else {
      this.isHex = false
      //刷新颜色值函数
      this.setColor()
      this.setData({
        hexLabel: "使用十进制颜色值"
      })
    }
  },
})